import { useEffect, useRef, useState } from "react";
import ChildrenA from "./components/childrenA";
import ChildrenB from "./components/childrenB";

const App = () => {
  const [count, setCount] = useState(1);
  const addCount = () => {
    setCount(count + 1);
  };
  const childrenARef = useRef<{ setValue: (num: number) => void }>(null);

  useEffect(() => {
    console.log(childrenARef.current)
  }, [])
  return (
    <div>
      <h1>App组件</h1>
      <h3>App count: {count}</h3>
      <div>
        <button onClick={() => addCount()}>+1</button>
        <button onClick={() => childrenARef.current?.setValue(10)}>value +1</button>
      </div>
      <hr />
      <ChildrenA ref={childrenARef} count={count} addCount={addCount}></ChildrenA>
      <hr />
      <ChildrenB addCount={addCount} setValue={(value: number) => { childrenARef.current?.setValue(value) }}></ChildrenB>
    </div>
  );
};

// App   父   =>(props)=>    子  ChildrenA
// ChildrenB   子  =>(自定义方法)=>  父     App
// ChildrenB  兄弟  ChildrenA    使用同一个父组件作为中介，  去传递两个组件之间的方法和属性

export default App;
